<template>
  <div :class="`caption-item row no-wrap ${isActive ? 'active' : ''}`">
    <div class="time-string">{{ caption.startTimeStr }}</div>
    <q-input
      borderless
      standout
      type="textarea"
      readonly
      :model-value="caption.text"
      autogrow
      dense
      input-style="padding-top: 0px; padding-bottom: 0px"
      style="width: 100%"
    />
  </div>
</template>
<script setup lang="ts">
import Caption from 'src/models/Caption';
import { PropType } from 'vue';
const props = defineProps({
  caption: {
    type: Object as PropType<Caption>,
    required: true,
  },
  isActive: {
    type: Boolean,
    default: false,
  },
});
</script>
<style lang="scss" scoped>
.caption-item {
  padding: 0.5rem 1rem;
  cursor: pointer;
  &.active {
    background-color: rgba(255, 255, 255, 0.1);
    border-left: 2px solid $accent;
  }
  .time-string {
    width: 3em;
    text-align: right;
    margin-right: 1rem;
    color: $sub;
  }
}
</style>
